<template>
    <div>
        <el-form :model="addrIds" :rules="validator?rules:{}" ref="addrIds">
            <el-row>
                <el-col :span="6">
                    <el-col :span="21">
                        <el-form-item prop="areaId">
                            <el-select v-model="addrIds.areaId" placeholder="请选择洲" style="width:100%">
                                <el-option v-for="list in addrData.areaData" :key="list.id" :label="list.name" :value="list.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="3">&nbsp</el-col>
                </el-col>
                <el-col :span="6">
                    <el-col class="line" :span="1">&nbsp</el-col>
                    <el-col :span="21">
                        <el-form-item prop="countryId">
                            <el-select v-model="addrIds.countryId" placeholder="请选择国家" style="width:100%">
                                <el-option v-for="list in addrData.countryData" :key="list.id" :label="list.name" :value="list.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="2">&nbsp</el-col>
                </el-col>
                <el-col :span="6">
                    <el-col class="line" :span="2">&nbsp</el-col>
                    <el-col :span="21">
                        <el-form-item prop="provinceId">
                            <el-select v-model="addrIds.provinceId" placeholder="请选择省市" style="width:100%">
                                <el-option v-for="list in addrData.provinceData" :key="list.id" :label="list.name" :value="list.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col class="line" :span="1">&nbsp</el-col>
                </el-col>
                <el-col :span="6">
                    <el-col class="line" :span="3">&nbsp</el-col>
                    <el-col :span="21">
                        <el-form-item prop="cityId">
                            <el-select v-model="addrIds.cityId" placeholder="请选择地区" style="width:100%">
                                <el-option v-for="list in addrData.cityData" :key="list.id" :label="list.name" :value="list.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<style>

</style>
<script>
export default {
    data() {
        return {
            formLabelWidth: '100px',
            // 筛选用区域信息
            rules: {
                areaId: [
                    { required: true, message: '请选择洲' },
                ],
                countryId: [
                    { required: true, message: '请选择国家' },
                ],
                provinceId: [
                    { required: true, message: '请选择省市' },
                ],
                cityId: [
                    { required: true, message: '请选择地区' },
                ]
            },
            addrData: {
                areaData: [],
                countryData: [],
                provinceData: [],
                cityData: [],
            }
        }
    },
    name: 'area-addr',
    props: {
        //四级地区的id值
        addrIds: {
            type: Object,
            default: null
        },
        //是否需要验证boolean
        validator: {
            type: Boolean,
            default: false
        },
        //是否加入‘全选’选项，数据筛选时使用
        allSelectOpt: {
            type: Boolean,
            default: false
        }
    },
    created() {
        this.getAddrData('area', '0');
    },
    beforeMount() { },
    mounted() {
        this.getInputData();
    },
    updated() { },
    beforeDestroy() { },
    destroyed() { },
    watch: {
        'addrIds.areaId': function (curVal, oldVal) {
            if (curVal === '') {
                this.addrData.countryData = [];
            } else {
                this.getAddrData('country', curVal);
                if (this.addrIds.areaName !== undefined) {
                    this.addrData.areaData.forEach(item => {
                        if (item.id == curVal) {
                            this.addrIds.areaName = item.name;
                            return
                        }
                    });
                }
            }
        },
        'addrIds.countryId': function (curVal, oldVal) {
            if (curVal === '') {
                this.addrData.provinceData = [];
            } else {
                this.getAddrData('province', curVal);
                if (this.addrIds.countryName !== undefined) {
                    this.addrData.countryData.forEach(item => {
                        if (item.id == curVal) {
                            this.addrIds.countryName = item.name;
                            return
                        }
                    });
                }
            }
        },
        'addrIds.provinceId': function (curVal, oldVal) {
            if (curVal === '') {
                this.addrData.cityData = [];
            } else {
                this.getAddrData('city', curVal);
                if (this.addrIds.provinceName !== undefined) {
                    this.addrData.provinceData.forEach(item => {
                        if (item.id == curVal) {
                            this.addrIds.provinceName = item.name;
                            return
                        }
                    });
                }
            }
        },
        'addrIds.cityId': function (curVal, oldVal) {
            if (curVal !== '') {
                if (this.addrIds.cityName !== undefined) {
                    this.addrData.cityData.forEach(item => {
                        if (item.id == curVal) {
                            this.addrIds.cityName = item.name;
                            return
                        }
                    });
                }
            }
        },
        'addrData.countryData': function (curVal, oldVal) {
            if (curVal.length > 0) {
                let isTrue = false
                this.addrData.countryData.forEach(item => {
                    if (item.id == this.addrIds.countryId) {
                        isTrue = true
                        return
                    }
                });
                if (!isTrue) {
                    this.addrIds.countryId = '';
                }
            } else {
                this.addrIds.countryId = '';
            }
        },
        'addrData.provinceData': function (curVal, oldVal) {
            if (curVal.length > 0) {
                let isTrue = false
                this.addrData.provinceData.forEach(item => {
                    if (item.id == this.addrIds.provinceId) {
                        isTrue = true
                        return
                    }
                });
                if (!isTrue) {
                    this.addrIds.provinceId = '';
                }
            } else {
                this.addrIds.provinceId = '';
            }
        },
        'addrData.cityData': function (curVal, oldVal) {
            if (curVal.length > 0) {
                let isTrue = false
                this.addrData.cityData.forEach(item => {
                    if (item.id == this.addrIds.cityId) {
                        isTrue = true
                        return
                    }
                });
                if (!isTrue) {
                    this.addrIds.cityId = '';
                }
            } else {
                this.addrIds.cityId = '';
            }
        }
    },
    methods: {
        getInputData() {
            this.$emit('updates', ''); //主动触发upup方法，'hehe'为向父组件传递的数据
        },
        // 获取洲区域信息
        getAddrData(type, id) {
            let _url = '/sys/dictionary/regionlist/';
            this.$http.get(_url + id)
                .then((response) => {
                    if (response.code === 0) {
                        if (this.allSelectOpt) { response.data.unshift({ id: '-1', name: '全部' }); }
                        switch (type) {
                            case 'area':
                                this.addrData.areaData = JSON.parse(JSON.stringify(response.data));
                                return;
                            case 'country':
                                this.addrData.countryData = JSON.parse(JSON.stringify(response.data));
                                return;
                            case 'province':
                                this.addrData.provinceData = JSON.parse(JSON.stringify(response.data));
                                return;
                            default:
                                this.addrData.cityData = JSON.parse(JSON.stringify(response.data));
                        }
                    } else {
                        console.log(response.statusText)
                    }
                }).catch((response) => {
                    console.log(response)
                })
        },
        validate() {
            let _judge;
            this.$refs['addrIds'].validate((valid) => {
                _judge = valid;
            });
            return _judge
        },
    }
}
</script>



